<script setup lang="ts">
const el = ref(null)
const show = ref(false)
useIntersectionObserver(el, ([{ isIntersecting }]) => {
  if (isIntersecting)
    show.value = isIntersecting
})
</script>

<template>
  <div ref="el" class="zuimeikeji">
    <Transition name="animate-zoomIn">
      <h1 v-show="show" class="line-center-title">
        最美科技
      </h1>
    </Transition>
    <div class="content">
      <Transition name="animate-fadeInUp">
        <p v-show="show" class="intro leading-[36px]">
          成立于2014年，围绕电影产业营销、影院管理、票务管理各领域，提供互联网一体化数智化解决方案。自主研发电影产业相关的标准化数字产品，提供专业的运维服务，创新用户观影购票体验，同时精耕用户大数据，深化技术研究与开发，赋能电影产业链各领域。
        </p>
      </Transition>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zuimeikeji {
  width: 1200px;
  margin: 0 auto;
  padding-top: 50px;

  .line-center-title {
    font-family: PangMenZhengDaoBiaoTiTi;
    margin-bottom: 40px;
  }

  .content {
    display: flex;
    margin-top: 43px;
    flex-direction: column;

    .intro {
      color: #666666;
      font-size: 18px;
      font-weight: 500;
    }

  }
}
</style>
